<template>
	<view class="orderContainer" @click="itemClick">
		<!-- header View -->
		<view class="flex-row-between">
			
			<view class="flex-colum-start" style="width: 70vw;margin-bottom: 10rpx;">
				<view class="flex-row-start">
					<text style="font-size: 28rpx;color: #3D3D3D;">商品名称：</text>
					<text style="font-size: 28rpx;color: #3D3D3D;">{{productName}}</text>
				</view>
				<view class="flex-row-start">
					<text style="font-size: 28rpx;color: #3D3D3D;">订单时间：</text>
					<text style="font-size: 28rpx;color: #3D3D3D;">{{orderTime}}</text>
				</view>
				<view class="flex-row-start">
					<text style="font-size: 28rpx;color: #3D3D3D;">订单状态：</text>
					<text style="font-size: 28rpx;color: #3D3D3D;">{{getOrderStatus}}</text>
				</view>
				<view class="flex-row-start">
					<text style="font-size: 28rpx;color: #3D3D3D;">支付金额：</text>
					<text style="font-size: 28rpx;color: #3D3D3D;">{{orderMoney}}元</text>
				</view>
				<view class="flex-row-start">
					<text style="font-size: 28rpx;color: #3D3D3D;">返佣金额：</text>
					<text style="font-size: 28rpx;color: #3D3D3D;">{{orderId}}</text>
				</view>
				<view class="flex-row-start">
					<text style="font-size: 28rpx;color: #3D3D3D;">推广额度：</text>
					<text style="font-size: 28rpx;color: #3D3D3D;">{{orderMoney}}元</text>
				</view>
			</view>
			
			<view class="">
				<img src="@/static/img/product/nvzhuang.jpg" alt="" style="width: 196rpx;height: 196rpx;">
			</view>
			
		</view>
		
		
		<!-- footerview -->
		<view class="flex-colum-start">
			<view class="flex-row-start">
				<text style="font-size: 28rpx;color: #3D3D3D;">订单号：</text>
				<text style="font-size: 28rpx;color: #3D3D3D;">{{orderId}}</text>
			</view>
			<view class="flex-row-start">
				<text style="font-size: 28rpx;color: #3D3D3D;">预计反佣金时间：</text>
				<text style="font-size: 28rpx;color: #3D3D3D;">{{orderTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderId: {
				type: String,
				default: '237823287328372382',
			},
			orderStatus: {
				type: Number,
				default: 0,
			},
			imgSrc: {
				type: String,
				default: '',
			},
			productName: {
				type: String,
				default: '鞋垫'
			},
			carModel: {
				type: String,
				default: 'Q5'
			},
			carType: {
				type: String,
				default: '自动'
			},
			carSeat: {
				type: String,
				default: '5'
			},
			carDischarge: {
				type: String,
				default: '3.0T'
			},
			orderType: {
				type: Number,
				default: 0
			},
			orderTime: {
				type: String,
				default: '2020-01-01 12:00:00'
			},
			orderMoney: {
				type: String,
				default: '3000'
			}

		},

		computed: {
			getOrderType: function() {
				var orderType = this.orderType;
				switch (orderType) {
					case 0:
						console.log('0000');
						return '配驾出租';
						break;
					case 1:
						console.log('111');
						return '单独租赁';
						break;
				}
			},
			getOrderStatus: function() {
				var orderStatus = this.orderStatus;
				switch (orderStatus) {
					case 0:
						console.log('0');
						return '已返佣';
						break;
					case 1:
						console.log('1');
						return '未返佣';
						break;
					
					default:
						return '';
						break;
				}
			}
		},
		methods: {
			// 点击事件
			itemClick() {
				var orderId = this.orderId;
				console.log(orderId)

				this.$emit('orderItemClick', {
					orderId
				})
			}
		}
	}
</script>

<style lang="scss">

	.orderContainer {
		width: 100%;
		height: 328rpx;
		background: #FFFFFF;
		margin-bottom: 10px;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;



		.mainContainer {
			display: flex;
			height: 200rpx;
			align-items: center;

			.main_rightView {
				// height: 100px;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 0;
				box-sizing: border-box;
			
				
				
			}
		}

	}
</style>
